{%extends "base.html"%}

{% block content %}
<nav aria-label="breadcrumb" class="mt-2">
  <ol class="breadcrumb px-0" style="background-color: #f0f4f5">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>
<!-- breadcrumb -->

<div class="border-bottom pt-3 pb-2 d-flex flex-wrap flex-md-nowrap align-items-center">
  <h4 class="mr-5">各大网站互联网岗位平均薪资对比</h4>
  <!-- <div class="btn-group d-flex">
    <button class="btn btn-sm btn-outline-secondary" style="font-size:13px">平均薪资</button>
    <button class="btn btn-sm btn-outline-secondary" style="font-size:13px">岗位数量</button>
  </div> -->
</div>
<!-- comp bar chart header -->

<div id="comp" class="mt-4" style="width:100%;height:400px;"></div>
<!-- comp bar chart -->

<div class="pt-5 pb-2 row d-flex flex-wrap flex-md-nowrap align-items-center">
  <h4 class="">各互联网岗位情况</h4>
</div>
<!-- 岗位 tabel header end -->

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>岗位名称</th>
      <th>平均薪资/月</th>
      <th>岗位总数量</th>
      <th>岗位数量最多的城市</th>
      <th>详情</th>
    </tr>
  </thead>
  <tbody>
    {% for station in station_list %}
    <tr>
      <td>{{ loop.index }}</td>
      <td>{{ station.station_name }}</td>
      <td>{{ station.mean_salary }}</td>
      <td>{{ station.count }}</td>
      <td>{{ station.max_count_city }}  {{ station.max_count }}/{{ station.count }}</td>
      <td><a class="btn btn-primary btn-sm" href="/station_detail_page?key={{ station.station_name }}"> 详情 </a></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<!-- table end -->
{% endblock %}

{% block styles %}
<!-- 越后面加载，优先级越高 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block scripts %}
<script>
var x_data, y1_data, y2_data, y3_data;
$.ajax({
  type: 'GET',
  url: '/api/get_website_comp',
  async: false,
  success: function(data){
    console.log(data);
    x_data = data.keys;
    y1_data = data.list_51job_salary;
    y2_data = data.list_boss_salary;
    y3_data = data.list_lagou_salary;
  },
  error: function(data){
  }
});
</script>
<script src="{{ url_for('static', filename='js/comp_bar.js') }}"></script>
{% endblock %}
